<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .item {
      width: 500px;
      background-color: skyblue;

      /* 不让div独占一行(单独学习, 了解) */
      /* 方式一: 改变元素的特性和垂直方向的布局 */
      display: inline-block;
      vertical-align: top;

      /* 方式二: 通过浮动完成 */
      /* float: left; */
    }

    .album {
      width: 500px;
    }

    .keyword {
      font-size: 30px;
      color: white;
      background-color: orange;
    }
  </style>
</head>
<body>
  
  <h1>星球介绍</h1>

  <!-- 木星的 -->
  <div class="item">
    <h2>木星</h2>
    <!-- alt -> alternative -->
    <img class="album" src="../images/muxing.jpg" alt="木星">
    <p>
      <span class="keyword">木星(Jupiter)</span>是太阳系八大行星中体积最大、自转最快的行星，从内向外的第五颗行星。它的质量为太阳的千分之一，是太阳系中其它七大行星质量总和的2.5倍。由于木星与土星、天王星、海王星皆属气体行星，因此四者又合称类木行星（木星和土星合称气态巨行星）。木星是一个气态巨行星，占所有太阳系行星质量的70%，主要由氢组成，占其总质量的75%，其次为氦，占总质量的25%，岩核则含有其他较重的元素。人类所看到的通常是大气中云层的顶端，压强比1个大气压略高。
    </p>
  </div>

  <!-- 地球的 -->
  <div class="item">
    <h2>地球</h2>
    <img class="album" src="../images/diqiu.jpg" alt="">
    <p>
      <span class="keyword">地球(Earth)</span>是太阳系八大行星之一，按离太阳由近及远的次序排为第三颗，也是太阳系中直径、质量和密度最大的类地行星，距离太阳1.5亿公里。地球自西向东自转，同时围绕太阳公转。现有40~46亿岁， [1]  它有一个天然卫星——月球，二者组成一个天体系统——地月系统。46亿年以前起源于原始太阳星云。
    </p>
  </div>

</body>
</html>